/** Compass Sass utilities */
@import "compass/css3/border-radius"
@import "compass/css3/transform-legacy"

/** Our utilities for sass*/
@import "include/utils"

/** Define template to be used */
@import "template/default"

/** Main layout **/
html,body 
	background: $backgroundColor !important
	font-family: $font

body 
	width: 900px
	padding: 0 30px
	margin: auto

/** Blog header **/
#header 
	padding: 10px 0
	position: relative

#logo a 
	display: block
	height: 49px
	color: #fff
	font-size: 48px
	letter-spacing: -6px
	text-shadow: 1px 2px 2px #000
	text-decoration: none

#logo span 
	color: #f00
	font-size: 70%

#title 
	background: $mainColor
	padding: 10px 30px 25px 20px
	margin: 20px 0
	position: relative
	@include border-radius(16px)
	color: $titleColor

#title h1 
	font-size: 80px
	margin: 0
	font-family: $niceFont
	font-weight: normal
	line-height: 100px
	text-shadow: 0 3px 0 #FFFFFF, 1px 5px 3px $titleShadow

#title h1 a 
	text-decoration: none
	color: inherit

#title h2 
	font-size: 26px
	margin: 0
	font-weight: normal

/** Main content **/
#main 
	+gradient($darkBackgroundColor, $backgroundColor)
	@include border-radius(16px)
	padding: 20px

/** Post **/
.post 
	margin-bottom: 10px

.post.thumbnail
	width: 266px
	height: 315px
	margin: 10px
	float: left
	position: relative
	background-color: $postBackgroundColor
	@include border-radius(4px, 4px)
	@include box-shadow(3px, 3px, 5px, black)
	
.post.thumbnail:hover
	@include scale(1.05)

.post .post-title
	font-size: 36px
	overflow: hidden
	font-family: $niceFont
	color: $postTitleColor
	text-shadow: 0 3px 0 #FFFFFF, 1px 5px 3px #CCCCCC
	height: 46px
	margin: 0

.post.thumbnail .post-title
	font-size: 30px

.post .post-title a 
	color: $postTitleColor
	text-decoration: none

.post .post-metadata 
	color: $defaultTextColor
	display: block
	font-size: 70%
	display: inline-block
	font-family: $scriptFontFamily
	float: right

.post .post-author 
	font-size: 130%
	font-weight: bold

.post .post-metadata a 
	color: #9FA85D

.post .post-content 
	position: relative
	margin: 10px 0 10px 0

.post .post-inner
	background: $postBackgroundColor
	margin-bottom: 10px
	padding-top: 10px
	padding-bottom: 10px
	@include border-radius(10px)

.post .post-content .post-text 
	margin-left: 10px
	margin-right: 10px
	margin-bottom: 10px
	

.post .about 
	text-indent: -999em
	display: block
	width: 0
	height: 0
	border-left: 10px solid transparent
	border-right: 10px solid transparent
	border-bottom: 10px solid $postBackgroundColor
	border-top: 0
	position: absolute
	top: -10px
	left: 24px
	
/** A little hacky to create arrows without images **/
.about 	
	text-indent: -999em
	display: block
	width: 0
	height: 0
	border-left: 10px solid transparent
	border-right: 10px solid transparent
	border-bottom: 10px solid $postBackgroundColor
	border-top: 0
	position: absolute
	top: -10px
	left: 60px

.post.thumbnail .post-image
	width: 246px
	padding: 10px
	height: 246px
	
.post.thumbnail .post-metadata
	padding-left: 10px
	padding-right: 10px
	width: 246px
	height: 48px
	color: black
	position: relative
	border-top: 1px dashed #E2CDAC

.post.thumbnail .post-metadata .post-date
	bottom: 3px
	font-family: $scriptFontFamily
	font-size: 11px
	position: absolute
	right: 5px
	color: $defaultTextColor

/** Footer **/
#footer 
	border-top: 1px solid #45597A
	font-size: 70%
	padding: 10px 30px
	text-align: center
	color: #869AB1
	margin-top: 30px

#footer a 
	color: $footerTextColor
	font-weight: bold
	margin-left: 15px
	display: inline

#footer a:first-child 
	margin-left: 0

/** Login **/
#login form 
	background: #8B98AD !important
	border: 0 !important
	@include border-radius(16px)

#login label,#password-field label,#username-field label 
	color: #161D28 !important
	font-size: 110% !important

#remember-field 
	display: none
	
	
/** Post view **/

.post-images
	padding-left: 4px
	border-top-color: #E2CDAC
	border-top-style: dashed
	border-top-width: 1px
	padding-top: 5px

.post-images .highslide img
	border: none
	
.post-images .highslide:HOVER img
	cursor: pointer

.post-images .pola
	background-color: $postBackgroundColor
	margin: 8px
	padding: 2px
	padding-bottom: 15px
	@include box-shadow(2px, 2px, 3px, black)
	float: left
	
.post-images .pola  
	@include rotate(-2)
	
.post-images .pola:nth-child(even)
	@include rotate(2)
	
.post-images .pola:nth-child(3n)
	@include rotate(3)
	
.post-images .pola:nth-child(5n)
	@include rotate(5)
	
.post-images .pola:nth-child(8n)
	@include rotate(-4)

.post-images .pola:HOVER
	@include scale(1.05)
	


/** Loading **/
#loadingDiv
	width: 200px 
	height: 20px 
	color: white
	background-color: black
	@include border-radius(10px)
	padding: 10px
	text-align: center
	+opacity(70)
	margin-top: 20px
	
/** discuss comments **/
#disqus_thread
	background-color: $backgroundColor !important
	@include border-radius(10px)
	padding: 10px
	margin-bottom: 20px

#disqus_thread h3
	color: $mainColor
	
#disqus_thread a
	color: #869AB1
	font-size: 12px
	
#disqus_thread #dsq-content #dsq-footer
	text-align: center
	font-size: 12px
	padding-left: 342px
	
#disqus_thread #dsq-content .dsq-toolbar-item 
	background-image: none
	background-color: $mainColor
	
#disqus_thread #dsq-comments
